import React from "react"
import { NavBar, Icon, Tabs, WhiteSpace  } from 'antd-mobile';
import  "./guanzhu.module.css"

import {getGuanzhu,getLoginstatus,getDetail} from "./api/index"
import {List} from "antd-mobile"
const Item = List.Item
class Guanzhu extends React.Component{
    constructor(){
        super()
        this.state={
            Guanzhu:[],
            uid:102061341
        }
    }
    Huitui(){
        this.props.history.go(-1)
    }
    handle(id){
        console.log(id)
        this.props.history.push('/person?id='+id)
    }
    componentDidMount(){
        // getDetail()
        // .then(body=>body.json())
        // .then(res=>{
        //     console.log('成功登录')
        //     getLoginstatus()
        //     .then(body=>body.json())
        //     .then(res=>{
        //         console.log('123'+res)
        //     })
        // })
        
        getGuanzhu(this.state.uid)
        .then(body=>body.json())
        .then(res=>{
            // console.log(res)
            this.setState({
                Guanzhu:res.follow
            })
            console.log(this.state.Guanzhu)
        })
    }
    render(){
        return(
            <div>
                <NavBar
                    mode="light"
                    icon={<Icon type="left" onClick={this.Huitui.bind(this)}/>}
                    onLeftClick={() => console.log('onLeftClick')}
                    rightContent={[
                        <img src={require('./img/音乐.png')}/>,
                    ]}
                    className='header'>关注</NavBar>
                <List>
                    {this.state.Guanzhu.map((item,index)=>(
                        <Item
                        thumb={item.avatarUrl}
                        onClick={this.handle.bind(this,item.userId)}
                        extra="..."
                        key={item.index}
                        >
                            <p>{item.nickname}</p>
                            <div>{item.signature}</div>
                        </Item>
                    ))}
                </List>
            </div>
        )
    }
}

export default Guanzhu